<template>
  <div class="echats2" v-echartsResize="echartsResize" ref="echartsRef">
  </div>
</template>
<script  setup>
import { reactive, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getCoordinatePoint } from '@/api/seismicInformations.js'
import latestTtimeStamp from '@/utlis/latestTtimeStamp.js'
let echartsInit = ref(null)
const echartsRef = ref()
let option = reactive({
  title: {
    text: '近15天各地区地震深度(千米)',
    textStyle: {
      //---主标题内容样式
      color: '#fff'
    },
    // subtext: '副标题', //---副标题内容样式
    // subtextStyle: {
    //   color: '#bbb'
    // },
    padding: [15, 0, 0, 60] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      rotate: 45,
      formatter: function(value) {
        if (value.length > 4) {
          let str = value.substring(0, 4) + '...'
          return str
        } else {
          return value
        }
      }
    },
    data: []
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    {
      type: 'slider',
      realtime: true,
      show: false,
      start: 0,
      end: 10, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
      height: 5, //组件高度
      left: 5, //左边的距离
      right: 5, //右边的距离
      bottom: 10, //下边的距离
      show: true, // 是否展示
      handleSize: 3, //两边手柄尺寸
      showDetail: false, //拖拽时是否展示滚动条两侧的文字
      zoomLock: true, //是否只平移不缩放
      moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
      //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
      handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',
      //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**
      startValue: 0, // 从头开始。
      endValue: 6, // 最多六个
      minValueSpan: 6, // 放大到最少几个
      maxValueSpan: 6, //  缩小到最多几个
      borderColor: '#ffffff',
      fillerColor: '#d5d4d4',
      backgroundColor: 'rgba(0,0,0,0.3)', //两边未选中的滑动条区域的颜色
      showDataShadow: false, //是否显示数据阴影 默认auto
      showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
      realtime: true, //是否实时更新
      filterMode: 'filter',
      handleStyle: {
        /*手柄的样式*/
        color: '#d5d4d4',
        borderColor: '#d5d4d4'
      }
    },
    {
      type: 'inside', // 支持内部鼠标滚动平移
      start: 0,
      end: 10,
      zoomOnMouseWheel: false, // 关闭滚轮缩放
      moveOnMouseWheel: true, // 开启滚轮平移
      moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
    }
  ],
  series: [
    {
      data: [],
      type: 'bar',
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示数值
            position: 'top', //数值在上方显示
            textStyle: {
              //数值样式
              color: '#D1DBFF', //字体颜色
              fontSize: 14 //字体大小
            }
          }
        }
      },
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: '#11d56d'
        },
        {
          offset: 1,
          color: '#83bff6'
        }
      ])
    }
  ]
})

const echartsInitFn = () => {
  echartsInit = echarts.init(echartsRef.value)
  echartsInit.setOption(option, true)
}
const echartsResize = () => {
  echartsInit?.resize()
}

const getCoordinatePointFn = () => {
  const day_30 = 24 * 60 * 60 * 15 * 1000
  option.xAxis.data = []
  option.series[0].data = []
  const timeStamp = latestTtimeStamp(day_30)
  getCoordinatePoint(timeStamp).then(res => {
    if (res.data) {
      res.data.forEach((item, index) => {
        option.xAxis.data.push(item.location)
        option.series[0].data.push(+item.earthquake_magnitude)
      })
    }
    echartsInitFn()
  })
}
onMounted(() => {
  echartsInitFn()
  getCoordinatePointFn()
})
</script>
<style scoped>
.echats2 {
  width: 100%;
  height: 100%;
}
</style>